<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="35%"
    top="10vh"
    :before-close="closeDialogHandle"
    :close-on-click-modal="false"
  >
    <el-form v-loading="dataLoad" size="small" :model="gameUser" :rules="gameUserRules" ref="gameUserForm" @keyup.enter.native="submitHandle" label-width="85px">
      <el-form-item label="游戏用户" prop="userId">
        <el-select v-model="gameUser.userId" filterable clearable :disabled="optType" placeholder="请选择游戏用户" class="width95percent">
          <el-option v-for="user in userList" :key="user.userId" :disabled="user.status === 1"
                     :label="user.username" :value="user.userId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="optType ? '增加次数' : '游戏次数'" prop="gameTotalNum">
        <el-input v-model.number="gameUser.gameTotalNum" clearable :placeholder="'请输入' + (optType ? '增加次数' : '游戏次数')" maxlength="5" class="width95percent"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          type="textarea"
          placeholder="请输入备注"
          v-model="gameUser.remark"
          :disabled="optType"
          maxlength="250"
          show-word-limit
          resize="none"
          class="width95percent"
        />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="closeDialogHandle(false)">取 消</el-button>
      <el-button v-show="!optType" :disabled="buttonLoad" type="primary" @click="saveHandle">添 加</el-button>
      <el-button v-show="optType" :disabled="buttonLoad" type="primary"  @click="updateHandle">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      let checkGameTotalNum = (rule, value, callback) => {
        if (!value) {
          return callback(new Error(this.optType ? '增加次数不能为空' : '游戏次数不能为空'));
        }
        if (!Number.isInteger(value)) {
          return callback(new Error('请输入数字值'));
        }
        if (value <= 0) {
          return callback(new Error('只能输入正整数'));
        }
        callback();
      };
      return {
        // 弹出框显示状态[true-显示 false-隐藏]
        visible: false,
        // 弹出框标题
        title: undefined,
        // 操作类型[true-修改 false-添加]
        optType: false,
        // 游戏用户对象
        gameUser: {
          // 主键
          id: undefined,
          // 用户主键
          userId: '',
          // 游戏主键
          gameId: undefined,
          // 可用次数
          gameTotalNum: '',
          // 备注
          remark: '',
        },
        // 用户列表
        userList: [],
        // 游戏用户表单校验规则对象
        gameUserRules: {
          userId: [
            { required: true, message: '请选择游戏用户', trigger: 'change' }
          ],
          gameTotalNum: [
            { required: true, validator: checkGameTotalNum, trigger: 'blur' }
          ],
        },
        // 数据加载状态[false-不加载 true-加载]
        dataLoad: false,
        // 按钮禁用状态[true-禁用 false-可用]
        buttonLoad: false,
      }
    },
    methods: {
      /**
       * 初始化弹出框方法
       * @param {Object} gameUser 游戏用户对象
       * @param {string} gameId   游戏主键
       */
      initDialog(gameUser, gameId) {
        // console.log('game', game);
        // 打开弹出框
        this.visible = true;

        let _gameUser = this.gameUser;
        _gameUser.gameId = gameId;

        if (gameUser) {
          this.title = '增加次数';
          this.optType = true;

          this.$nextTick(() => {

            for (let propKey in _gameUser) {
              if (gameUser.hasOwnProperty(propKey)) {
                _gameUser[propKey] = gameUser[propKey];
              }
            }
            _gameUser.gameTotalNum = '';
          });
        } else {
          this.title = '添加用户';
          this.optType = false;
        }
        this.getUserList();
      },
      /**
       * 获取用户列表方法
       */
      getUserList() {
        // 开始加载
        this.dataLoad = true;
        this.$axios.$get('/sys/user/list')
          .then(({ data }) => {
            this.userList = data;
          })
          .catch(() => {})
          .finally(() => {
            // 加载结束
            this.dataLoad = false;
          })
      },
      /**
       * 表单提交事件
       */
      submitHandle() {
        if (this.optType) {
          this.updateHandle();
        } else {
          this.saveHandle();
        }
      },
      /**
       * 游戏用户添加事件
       */
      saveHandle() {
        // 按钮禁用
        this.buttonLoad = true;
        this.$refs.gameUserForm.validate()
          .then(() => {
            return this.$axios.$post('/game-user/save', this.gameUser);
          })
          .then(() => {
            this.notify('success', '操作成功', '保存游戏用户操作成功');

            this.closeDialogHandle(true);
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可使用
            this.buttonLoad = false;
          });
      },
      /**
       * 游戏用户修改事件
       */
      updateHandle() {
        // 按钮禁用
        this.buttonLoad = true;
        this.$refs.gameUserForm.validate()
          .then(() => {
            return this.$axios.$post('/game-user/increment/num', this.gameUser);
          })
          .then(() => {
            this.notify('success', '操作成功', '增加游戏用户可用游戏次数操作成功');

            this.closeDialogHandle(true);
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可使用
            this.buttonLoad = false;
          });
      },
      /**
       * 关闭弹出框方法
       * @param {boolean | function} refresh 是否刷新父级组件数据
       */
      closeDialogHandle(refresh) {
        // 重置表单
        this.$refs.gameUserForm.resetFields();
        this.gameUser.id = undefined;
        this.gameUser.gameId = undefined;

        if (typeof refresh === 'function') {
          refresh = false;
        }
        if (refresh) {
          // 向上传递事件
          this.$emit('refresh-table');
        }
        this.$nextTick(() => {
          // 关闭弹出框
          this.visible = false;
        });
      },
    }
  }
</script>

<style scoped>
  .width95percent {
    width: 95%;
  }
</style>
